<template>
    <view id="container" :style="{width:divided || ''}" :class="['container-c']">
        <!-- :style="{ width: width || '100%', height: height || 'auto' }" -->
        <!-- calc() -->
        <view
            v-for="(item, index) in list"
            :id="'tab' + index"
            :class="['tab', active == index ? 'active' : '',list.length === 3 && divided ? 'divided' : '', list.length == 2 && divided ? 'divided-two' : '']"
            @click="onTab(index)"
            :key="index"
        >
            {{ item }}
        </view>
    </view>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
const emits = defineEmits(['change'])
defineProps(['active', 'list', 'divided'])

const onTab = (index: number) => {
    console.log('孩子调用')
    emits('change', index)
}

</script>
<style lang="scss" scoped>
.container-c {
    position: relative;
    display: inline-block;
    border-radius: 44rpx;
    overflow: auto;
    background: #F4F4F7;
    color: $grey;
    font-size: 28rpx;
}
.tab {
    display: inline-block;
    padding: 0 37rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 44rpx;
}
.active {
    background-color: white;
    font-size: 32rpx;
    color: #202536;
    font-weight: 600;
}
.divided{
    padding: 0;
    width: calc(100% / 3);
}
.divided-two{
    padding: 0;
    width: calc(100% / 2);
}
</style>
